<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/Underscore-min.js"></script>
    <style>
        body,div,ul,ol,dl,li,dt,dd,p,h1,h2,h3,h4,h5,h6,tr,td,input,textarea{
        margin:0;
        padding:0;
            list-style: none;
        }
        html,body,ul{
            width: 100%;
            height: 100%;
        }

        #photo{
            position: relative;

        }
        li{
            width: 250px;
            height: 360px;
            box-shadow: 0 0 10px #ccc;
            position: absolute;
        }
        .current{
            position: absolute;
            top: 50%!important;
            left:50%!important;
            transform: translate(-50%,-50%) rotate(0deg) scale(2) !important;
            transition: all 1s;
            z-index: 99;
        }
    </style>
</head>
<body>
<ul id="photo">
</ul>

<script>
    window.onload = function () {
        var photo = document.getElementById('photo');
        //动态添加Li
        for(var i=0;i<10;i++){
            var li = document.createElement('li');
            var img = document.createElement('img');
            img.src = 'images/pic'+(i+1)+'.jpg';
            photo.append(li);
            li.append(img);
        }
        //用lis代表所有的li
        var lis = photo.children;
//        console.log(lis);
        //获取屏幕宽高
        var clientW = document.documentElement.clientWidth-250;
        var clientH = document.documentElement.clientHeight-360;

            //取出lis里面每个li
        for(var j=0;j<lis.length;j++){
            //给ul里面的每个li设置transform,top.left属性
            lis[j].style.transform = 'rotate('+_.random(0,360)+'deg)';
            //让li散开
            lis[j].style.top = _.random(0,clientH)+'px';
            lis[j].style.left = _.random(0,clientW)+'px';

            lis[j].onclick = function () {
                for(var i =0;i<lis.length;i++){
                    lis[i].className = '';
                }
                this.className = 'current';
            }
        }



    }

</script>
</body>
</html>